<template>
	<view>
		<view class="top-container">
			<view class="status_bar"></view>
			<view class="top" @click="toUserInfo">
				<image class="avatar" :src="user.headPicUrl"></image>
				<view class="content">
					<text class="nick">{{user.nick}}</text>
					<view class="code">
						<text class="userCode">ID:{{user.userCode}}</text>
						<text class="copy">复制</text>
					</view>
				</view>
				<image :src="getImageUrl('ic_arrow_right_white_title.png')" style="width: 30rpx;" mode="widthFix"></image>
			</view>
			
			<view class="follow-container">
				<view class="item">
					<view class="num">0</view>
					<view class="text">关注</view>
				</view>
				<view class="item">
					<view class="num">0</view>
					<view class="text">粉丝</view>
				</view>
				<view class="item">
					<view class="num">0</view>
					<view class="text">访问</view>
				</view>
			</view>
			
			<view class="vip" v-if="!online">
				<image :src="getImageUrl('ic_mine_vip.png')" style="width: 40rpx; height: 40rpx;"></image>
				<view class="text">{{vip.text}}</view>
				<view class="btn" @click="toVip">{{vip.btn}}</view>
			</view>
			
			<image class="top-bg" src="@/static/mine_top_bg.png" mode="widthFix"></image>
		</view>
		
		
		
		<view class="cell-container">
			<z-cell-item label="实名认证" :icon="getImageUrl('ic_mine_realname.png')" @click.native="toRealName" style="margin-top: 50rpx;"></z-cell-item>
			<z-cell-item label="在线客服" :icon="getImageUrl('ic_mine_customer_service.png')" @click.native="onService"></z-cell-item>
			<z-cell-item label="设置" :icon="getImageUrl('ic_mine_set.png')" @click.native="toSetting"></z-cell-item>
		</view>
		
		
	</view>
</template>


<script>
	export default {
		data() {
			return {
				online: uni.$online,
				user: {},
				vip: {
					text: '加入vip，立享专属特权',
					btn: '立即开通'
				}
			}
		},
		onShow() {
			this.requestUser();
		},
		methods: {
			toUserInfo() {
				uni.navigateTo({
					url: '/main/user/info/info?txCode=' + this.user.txCode
				})
			},
			toVip() {
				uni.navigateTo({
					url: '/main/mine/vip/vip'
				})
			},
			toRealName() {
				uni.navigateTo({
					url: '/main/mine/realname/realname'
				})
			},
			onService() {
				uni.showModal({
					title: '客服',
					content: `客服QQ：2778027813 工作时间9：00-18：00`
				})
			},
			toSetting() {
				uni.navigateTo({
					url: '/main/mine/setting/setting'
				})
			},


			//以下为接口
			async requestUser() {
				let res = await this.$common.get('/api/getLoginUser');
				if (200 == res.code) {
					this.user = res.data;
					if (0 == res.data.vip) {
						this.vip.text = '已开通VIP ' + res.data.vipTime + '到期';
						this.vip.btn = '立即续费';
					} else {
						this.vip.text = '开通VIP|享文字免费畅聊';
						this.vip.btn = '立即开通';
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			},
		}
	}
</script>



<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.top {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.content {
			display: flex;
			flex-direction: column;
			flex: 1;
			margin-left: 20rpx;

			.nick {
				font-size: 36rpx;
				color: #f3f3f3;
			}
			.code{
				display: flex;
				flex-direction: row;
				align-items: center;
				.userCode {
					font-size: 24rpx;
					color: #f3f3f3;
					margin-top: 5rpx;
				}
				.copy{
					font-size: 20rpx;
					color: #f3f3f3;
					border: 1px solid #b68dff;
					border-radius: 10rpx;
					padding: 5rpx 15rpx;
					margin-left: 15rpx;
				}
			}
			
		}
	}
	
	.follow-container{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		margin-top: 20rpx;
		.item{
			display: flex;
			flex-direction: column;
			align-items: center;
			.num{
				color: #f3f3f3;
				font-size: 40rpx;
				font-weight: 500;
			}
			.text{
				color: #f3f3f3;
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		}
	}

	.vip {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100rpx;
		margin: 50rpx 30rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
		background-image: linear-gradient(to right, #5A5B7F, #35385B);
		padding: 0 15rpx;
		font-size: 24rpx;
		color: #feeac9;

		.text {
			flex: 1;
			margin: 0 15rpx;
		}

		.btn {
			font-size: 26rpx;
			color: #302f37;
			margin: auto 15rpx;
			padding: 10rpx 20rpx;
			background: linear-gradient(to right, #feeac9, #f1af63);
			border-radius: 50rpx;
		}
	}

	
	.top-container{
		position: relative;
		background: linear-gradient(to right, #7653f5, #a348fd);
		
		.top-bg{
			width: 100%;
			position: absolute;
			bottom: -20rpx;
		}
	}
	
	.cell-container{
		margin: 0 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 0 15rpx;
	}
	
	
	
</style>